<template>
  <div class="ql-container ql-snow">
    <div class="article">
      <h2 class="title">{{ article.title }}</h2>
      <p class="author">作者：{{ article.author }}</p>
      <p class="apply-time">发表时间:{{ article.articleStatus === 1 ? article.applyTime : '暂未发表' }}</p>
      <div class="category">
        <el-tag size="small" type="success" offec="dark" style="margin: 5px;cursor: pointer;"
                v-for="c in article.categoryList" :key="c.categoryId" v-text="c.categoryName"></el-tag>
      </div>
      <p class="profile" v-text="article.profile"></p>
      <div class="ql-editor" v-html="article.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetail',
  props: ['article'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="scss">
.article {
  width: 780px;
  margin: 0 auto;

  .title {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
  }

  .author, .apply-time, .category {
    text-align: center;
    margin-bottom: 15px;
  }

  .profile {
    margin-bottom: 15px;
    border-left: 4px solid #42B983;
    color: #777;
    background-color: rgba(66, 185, 131, .1);
    padding: 10px 15px;
  }
}
</style>
<style>
img {
  width: 80%;
}
</style>
